<template>
  <div class="simditor">
    <textarea :id="id"></textarea>
  </div>
</template>
<script>
  import $ from 'jquery'
  import Simditor from 'simditor'
  import 'simditor/styles/simditor.css'
  export default {
    name: 'simditor',
    data() {
      return {
        editor: ''
      }
    },
    props: {
      id:'',  //这里传入动态id，一个页面能使用多个编辑器
    },
    mounted() {
      this.editor = new Simditor({
        textarea: $('#'+this.id),
        toolbar : ['title','bold','italic','underline','strikethrough','fontScale','color','ol','ul','blockquote','code','table','link','image','hr','indent','outdent','alignment'],
        upload:{
          url : '/api/news/upload', //文件上传的接口地址
          params: null, //键值对,指定文件上传接口的额外参数,上传的时候随文件一起提交
          fileKey: 'file', //服务器端获取文件数据的参数名
          connectionCount: 3,
          leaveConfirm: '正在上传文件',
          type:"post"
        },
        placeholder:'请输入内容',
        codeLanguages:[
          { name: 'Bash', value: 'bash' },
          { name: 'C++', value: 'c++' },
          { name: 'C#', value: 'cs' },
          { name: 'CSS', value: 'css' },
          { name: 'Erlang', value: 'erlang' },
          { name: 'Less', value: 'less' },
          { name: 'Sass', value: 'sass' },
          { name: 'Diff', value: 'diff' },
          { name: 'CoffeeScript', value: 'coffeescript' },
          { name: 'HTML,XML', value: 'html' },
          { name: 'JSON', value: 'json' },
          { name: 'Java', value: 'java' },
          { name: 'JavaScript', value: 'js' },
          { name: 'Markdown', value: 'markdown' },
          { name: 'Objective C', value: 'oc' },
          { name: 'PHP', value: 'php' },
          { name: 'Perl', value: 'parl' },
          { name: 'Python', value: 'python' },
          { name: 'Ruby', value: 'ruby' },
          { name: 'SQL', value: 'sql'}
        ]
        //optional options
      });
      /* let vm = this
      this.editor = new Simditor(Object.assign({}, {
        textarea: $(`#${vm.id}`)
      }, this.options))*/
      this.editor.on('valuechanged', (e, src) => {
        this.valueChange(e, src)
      }) 
    },
    methods: {
      valueChange(e, val) {
        this.$emit('change', this.editor.getValue())
      },
      setValue(val){
        this.editor.setValue(val);
      }

    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>